<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :before-close="changedialogVisible">
      <el-form style="margin-top:20px;" :inline="true" :model="formInline" class="demo-form-inline" label-width="110px">
        <div class="formtitle">专家基本信息</div>
        <el-form-item label="专家姓名" prop="name" class="onecell">
          <el-input v-model="formInline.name" placeholder="专家姓名" :disabled="true" />
        </el-form-item>
        <el-form-item label="专家编号" class="onecell">
          <el-input
            v-model="formInline.serialNumber"
            placeholder="H10-五位流水号，自动生成"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="目前状态" prop="currentState" class="onecell">
          <el-select v-model="formInline.currentState" placeholder="请选择" :disabled="true">
            <el-option label="在用" value="0" />
            <el-option label="停用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex" class="onecell">
          <el-radio-group v-model="formInline.sex" :disabled="true">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" class="onecell">
          <el-date-picker
            v-model="formInline.birthday"
            type="date"
            placeholder="选择日期"
            style="width: 100%;"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="籍贯" class="onecell">
          <el-input v-model="formInline.nativePlace" placeholder="籍贯" :disabled="true" />
        </el-form-item>
        <el-form-item label="职务" class="onecell">
          <el-input v-model="formInline.duty" placeholder="职务" :disabled="true" />
        </el-form-item>
        <el-form-item label="最高学历" class="onecell">
          <el-select v-model="formInline.education" placeholder="请选择" :disabled="true">
            <el-option label="大专" value="0" />
            <el-option label="本科" value="1" />
            <el-option label="硕士" value="2" />
            <el-option label="博士" value="3" />
            <el-option label="其他" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="毕业学校" class="onecell">
          <el-input v-model="formInline.school" placeholder="毕业学校" :disabled="true" />
        </el-form-item>
        <el-form-item label="专业" class="onecell">
          <el-input v-model="formInline.profession" placeholder="专业" :disabled="true" />
        </el-form-item>
        <el-form-item label="最高职称" class="onecell">
          <el-select v-model="formInline.professionalTitle" placeholder="请选择" :disabled="true">
            <el-option label="中级" value="0" />
            <el-option label="高级" value="1" />
            <el-option label="正高级" value="2" />
            <el-option label="无" value="3" />
            <el-option label="其他" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="身份证号"
          prop="identityCard"
          class="onecell"
          v-show="formInline.source!=='1'"
        >
          <el-input v-model="formInline.identityCard" placeholder="身份证号" :disabled="true" />
        </el-form-item>
        <el-form-item
          label="手机号码"
          prop="phonenumber"
          class="onecell"
          v-show="formInline.source!=='1'"
        >
          <el-input v-model.number="formInline.phonenumber" placeholder="手机号码" :disabled="true" />
        </el-form-item>
        <el-form-item label="电子邮箱" class="onecell" v-show="formInline.source!=='1'">
          <el-input v-model="formInline.email" placeholder="电子邮箱" :disabled="true" />
        </el-form-item>
        <el-form-item label="开户行" class="onecell" v-show="formInline.source!=='1'">
          <el-input v-model="formInline.bankName" placeholder="开户行" :disabled="true" />
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankNo" class="onecell" v-show="formInline.source!=='1'">
          <el-input v-model.number="formInline.bankNo" placeholder="银行卡号" :disabled="true" />
        </el-form-item>
        <el-form-item label="其他联系电话" class="onecell" prop="otherContactNumber" v-show="formInline.source!=='1'">
          <el-input v-model="formInline.otherContactNumber" placeholder="其他联系电话" :disabled="true" />
        </el-form-item>
        <el-form-item label="是否同济大学在职人员" class="onecell" prop="tjuFlag">
                 <el-select v-model="formInline.tjuFlag" placeholder="请选择"  :disabled="true">
              <el-option label="是" value="1" />
              <el-option label="否" value="0" />
            </el-select>  
              </el-form-item>
        <el-form-item label="专业类别" prop="professionCategorys" class="twocell">
          
          <el-cascader
            v-model="formInline.professionCategorys"
            :disabled="true"
            :options="professionOption"
            :show-all-levels="false"
            :props="{ multiple: true,value: 'id',emitPath:false,checkStrictly: true }"
            :collapse-tags="false"
            style="width:100%"
          />
           <!--<el-select
            v-model="formInline.professionCategorys"
            placeholder="请选择"
            filterable
            multiple
            :multiple-limit="5"
            :disabled="true"
          >
            <el-option
              v-for="item in professionOption"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>-->
        </el-form-item>

        <el-form-item label="现所在单位" class="twocell">
          <el-input v-model="formInline.currentCompany" placeholder="现所在单位" :disabled="true" />
        </el-form-item>
        <el-form-item label="所在部门/院系" class="twocell" prop="tjuFaculty">
          <el-select v-model="formInline.tjuFaculty" placeholder="请选择" :disabled="true">
            <el-option label="是" value="否" />
            <el-option label="否" value="否" />
            <el-option label="未知" value="未知" />
          </el-select>
        </el-form-item>
        <el-form-item class="twocell">
          <el-table
            :data="formInline.bmsExpertCertifications"
            border
            style="width: 100%;margin-left:20px"
          >
            <el-table-column label="专家持证情况" prop="type">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type" placeholder="请选择" :disabled="true">
                  <el-option label="建设工程评标专家" value="0" />
                  <el-option label="政府采购专家" value="1" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="是否持证">
              <template slot-scope="scope">
                <el-select v-model="scope.row.flag" placeholder="请选择" :disabled="true">
                  <el-option label="是" value="0" />
                  <el-option label="否" value="1" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="专家证号">
              <template slot-scope="scope">
                <el-form-item :prop="'bmsExpertCertifications.'+scope.$index+'.number'">
                  <el-input v-model="scope.row.number" style="width:120px" :disabled="true" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="资深专家" prop="seniorExpertFlag">
              <template slot-scope="scope">
                <el-select v-model="scope.row.seniorExpertFlag" placeholder="请选择" :disabled="true">
                  <el-option label="是" value="0" />
                  <el-option label="否" value="1" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="专业" prop="expertProfession">
              <template slot-scope="scope">
                <el-form-item :prop="'bmsExpertCertifications.'+scope.$index+'.expertProfession'">
                  <el-input
                    v-model="scope.row.expertProfession"
                    style="width:120px"
                    :disabled="true"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="所属地区" prop="area">
              <template slot-scope="scope">
                <el-form-item :prop="'bmsExpertCertifications.'+scope.$index+'.area'">
                  <el-select
                    v-model="scope.row.area"
                    placeholder="请选择"
                    style="width:120px;"
                    :disabled="true"
                  >
                    <el-option
                      v-for="item in areaOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <!-- <el-table-column width="80" label="操作">
              <template>
                <a>删除</a>
              </template>
            </el-table-column>-->
          </el-table>
        </el-form-item>
        <el-form-item label="联系地址" class="twocell" prop="address" v-show="formInline.source!=='1'">
          <el-input v-model="formInline.address" placeholder="联系地址" :disabled="true" />
        </el-form-item>
        <el-form-item label="附件上传" class="twocell">
          <vue-uploader
            v-if="dialogVisible"
            :single-type="false"
            :file-list="formInline.attachments"
            :upload-readonly="true"
          />
          <!-- <el-input v-model="formInline.file" placeholder="附件上传"></el-input> -->
        </el-form-item>
        <div class="formtitle">专业特长、研究领域、经历与成就</div>
        <el-form-item label="业务类别" class="twocell">
          <el-cascader
            v-model="formInline.businessMerits"
            :options="categoryOptions"
            :show-all-levels="false"
            :props="{multiple:true, value: 'id',emitPath:false }"
            filterable
            style="width:100%"
            :disabled="true"
          />
        </el-form-item>
        <!-- <el-form-item label="业务类别" class="twocell">
                <el-select v-model="formInline.serviceCategory" multiple placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
        </el-form-item>-->
        <el-form-item label="行业类别" class="twocell">
          <el-select v-model="formInline.industryMerits" multiple placeholder="请选择" :disabled="true">
            <el-option
              v-for="item in industryOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="语言特长" class="twocell">
          <!--<el-select v-model="formInline.languageMerit" placeholder="请选择" :disabled="true">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>-->
          <el-input v-model="formInline.languageMerit" placeholder="语言特长" :disabled="true" />
        </el-form-item>
        <el-form-item label="经历与成就" class="twocell">
          <el-input
            v-model="formInline.introduction"
            placeholder="经历与成就"
            type="textarea"
            :rows="2"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="特长备注" class="twocell">
          <el-input
            v-model="formInline.meritRemark"
            placeholder="特长备注"
            type="textarea"
            :rows="2"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="专家费用(元)" class="twocell">
          <el-input v-model="formInline.useAmount" placeholder="专家费用" :disabled="true" />
          <!-- <el-input-number
            v-model="formInline.useAmount"
            placeholder="专家费用"
            controls-position="right"
            :min="0"
            :disabled="true"
          />-->
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="changedialogVisible">取 消</el-button>
        <el-button type="primary" @click="changedialogVisible">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { professionList } from '@/api/projectleader/expertGlance';
import vueUploader from '@/components/Uploader';
import { professionCategory } from '@/api/expert/professionCategory';
import { treeselect } from '@/api/system/business_category';
import { provinceCityTree } from '@/api/provinceCity';
export default {
  name: 'useExpert',
  components: { vueUploader },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    expertInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      loading: true,
      expertNanme: '',
      profession: '',
      tableData: [],
      categoryOptions: [],
      areaOptions: [],
      industryOptions: [],
      formInline: {
        name: '',
        serialNumber: '',
        // guid: '',
        currentState: '',
        sex: '',
        birthday: '',
        nativePlace: '',
        duty: '',
        education: '',
        school: '',
        profession: '',
        professionalTitle: '',
        identityCard: '',
        phonenumber: '',
        email: '',
        bankName: '',
        bankNo: '',
        professionCategorys: '',
        otherContactNumber: '',
        currentCompany: '',
        tjuFaculty: '',
        file: '',
        businessMerit: [],
        // serviceCategory: [],
        industryMerits: [],
        languageMerit: '',
        introduction: '',
        meritRemark: '',
        useAmount: '',
        bmsExpertCertifications: []
      },
      professionOption: []
    }
  },
  mounted () {
    if (this.expertInfo) {
      this.formInline = this.expertInfo
    }
  },
  created () {
    this.professionList()
    treeselect().then(res => {
      if (res.code === 200) {
        this.categoryOptions = res.data
      }
    })
    provinceCityTree({ type: '1' }).then(res => {
      if (res.code === 200) {
        this.areaOptions = res.data
      }
    })
    //行业类别
    this.getDicts("sys_industry_type").then(response => {
      this.industryOptions = response.data;
    });
  },
  methods: {
    // 专业类别选择 begin
    professionList () {
      professionCategory().then(res => {
        if (res.code === 200) {
          this.professionOption = res.data
        }
      })
    },
    // end
    changedialogVisible () {
      this.$emit('changedialogVisible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-dialog {
  width: 1200px;
  .formtitle {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #d9e5f1;
    margin-bottom: 10px;
  }
  .onecell {
    width: calc(50% - 20px);
  }
  .twocell {
    width: calc(100% - 20px);
  }
  .threecell {
    width: 100%;
  }
  .el-form-item--medium .el-form-item__content {
    width: calc(100% - 110px);
    .el-select {
      width: 100%;
    }
  }
}
.input-wrap {
  padding: 8px;
  display: flex;
  width: 50%;
  .input-label {
    min-width: 1em;
    max-width: 6em;
    color: rgba(0, 0, 0, 0.65);
    margin-right: 8px;
    display: flex;
    align-items: center;
    flex: 0 0 90px;
  }

  .input-content {
    -webkit-box-flex: 1;
    flex-grow: 1;
  }
}

.tablebox {
  margin-top: 20px;
  height: 100%;
}

/deep/.el-dialog__body {
  padding: 0 20px;
}
/deep/.el-form--inline .el-form-item {
  text-align: left;
}

/deep/.el-input.is-disabled {
  .el-input__prefix {
    display: none;
  }
  .el-input__suffix {
    display: none;
  }
}

/deep/.el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  cursor: auto;
  padding-left: 15px;
}
/deep/.el-input.is-disabled .el-input__inner:hover {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  cursor: auto;
}
/deep/.el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-ms-input-placeholder {
  color: #fff;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  resize: none;
  cursor: auto;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
  color: #fff;
}
</style>
